/* 单个资产的的 item
 * @Author: Joursion
 * @Date: 2018-07-17 11:55:21
 * @Last Modified by: Joursion
 * @Last Modified time: 2018-09-03 14:19:22
 */

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { scaleSize, scaleFontSize } from '../util/size';

interface IProps {
    type: string,
    amountTo: number | string,
    locked: number | string,
    available: number | string,
    topRightText: string,
    topRightTextOnPress?: Function,
    onPress?: Function
}

export default class EntrustItem extends Component<IProps, any>{
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    onPress = () => {
        if (this.props.onPress) {
            this.props.onPress()
        }
    }

    _topRightTextOnPress = () => {
        const { topRightTextOnPress } = this.props;
        console.log('??_topRightTextOnPress');
        if (topRightTextOnPress) {
            topRightTextOnPress();
        }
    }



    render() {
        const { type, amountTo, locked, available } = this.props;

        return (
            <TouchableOpacity onPress={this.onPress} activeOpacity={1}>
                <View style={{
                    width: scaleSize(335),
                    height: scaleSize(96),
                    paddingLeft: scaleSize(16),
                    paddingRight: scaleSize(16),
                    paddingBottom: scaleSize(14),
                    paddingTop: scaleSize(14),
                    backgroundColor: '#FFFFFF',
                    borderRadius: 2,
                    marginBottom: scaleSize(10)
                }}>
                    <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                        <Text style={{
                            fontFamily: 'Helvetica-Bold',
                            fontSize: scaleFontSize(16),
                            color: '#3A62F0',
                            lineHeight: scaleSize(19)
                        }}>
                            {type}
                        </Text>

                        <TouchableOpacity activeOpacity={0.9}
                            onPress={this._topRightTextOnPress}>
                            <Text style={{
                                fontFamily: 'PingFangSC-Regular',
                                fontSize: scaleFontSize(12),
                                color: '#3A62F0',
                                lineHeight: scaleSize(17)
                            }}>
                                {this.props.topRightText}
                            </Text>
                        </TouchableOpacity>
                    </View>

                    <View style={{
                        display: 'flex',
                        flexDirection: 'row'
                    }}>

                        <View style={{
                            display: 'flex',
                            flexDirection: 'column',
                            flex: 1,
                            marginTop: scaleSize(9),
                        }}>
                            <Text style={{
                                fontFamily: 'PingFangSC-Regular',
                                fontSize: scaleFontSize(12),
                                color: '#9B9B9B',
                                lineHeight: scaleSize(17)
                            }}>
                                可用
                        </Text>

                            <Text style={{
                                marginTop: scaleSize(2),
                                fontFamily: 'Helvetica',
                                fontSize: scaleFontSize(14),
                                color: '#4A4A4A',
                                lineHeight: scaleSize(17),
                            }}>
                                {available}
                            </Text>
                        </View>

                        <View style={{
                            display: 'flex',
                            flexDirection: 'column',
                            flex: 1,
                            marginTop: scaleSize(9),
                        }}>
                            <Text style={{
                                fontFamily: 'PingFangSC-Regular',
                                fontSize: scaleFontSize(12),
                                color: '#9B9B9B',
                            }}>
                                冻结
                        </Text>
                            <Text style={{
                                fontFamily: 'Helvetica',
                                fontSize: scaleFontSize(14),
                                color: '#9B9B9B',
                                lineHeight: scaleSize(17),
                                marginTop: scaleSize(2),
                            }}>{locked}</Text>
                        </View>

                        <View style={{
                            display: 'flex',
                            flexDirection: 'column',
                            flex: 1,
                            marginTop: scaleSize(9),
                        }}>
                            <Text style={{
                                fontFamily: 'PingFangSC-Regular',
                                fontSize: scaleFontSize(12),
                                color: '#9B9B9B',
                                textAlign: 'right',
                            }}>折合(CNY)</Text>

                            <Text style={{
                                fontFamily: 'Helvetica',
                                fontSize: scaleFontSize(14),
                                color: '#4A4A4A',
                                textAlign: 'right',
                                lineHeight: scaleSize(17),
                                marginTop: scaleSize(2),
                            }}>
                                {amountTo}</Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}
